<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 需求：通过ajax向数据库添加输入的用户信息并跳转到显示用户信息页面 -->
    <form>
        <fieldset>
            <legend>信息录入</legend>
            <label for="">
                账号：<input type="text" name="username" placeholder="请输入您的用户名">
            </label>
            <label for="">
                密码：<input type="password" name="password" placeholder="请输入您的密码">
            </label>
            <input type="button" id="btn" value="提交">
        </fieldset>
    </form>
    <script src="./lib/jquery/jquery-3.3.1.js"></script>
    <script>
        // 1.获取按钮 添加点击事件
        $('#btn').on('click', function () {
            // 2.获取表单的数据
            const data = $('form').serialize();
            // 3.建立ajax对象
            const xhr = new XMLHttpRequest();
            // 4.发出post请求，提交数据
            xhr.open('post', '/adduser', true);
            // 5.设置发送头的数据类型
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 6.发送数据体
            xhr.send(data);
            // 监听状态
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    const obj = JSON.parse(xhr.responseText);
                    if (obj.code == 10000) {
                        // 发出请求后，如果响应成功，，证明添加成功了数据，跳转到show页面渲染，把模板渲染工作移动到前端，views变成了public里静态资源里
                        location.href = '/show.html';                    }
                }
            }
        })
    </script>
</body>

</html>